/*
  学习目标：通过状态提升-实现兄弟组件通信
  需求：能够让Wife花老公的钱
 //  1. 把Husband的state挪到App组件中
 //  2. 通过父传子，将moneny传给Husband
 //  3. 通过props访问money 

  // 4. 子传父给HUsband：父组件内定义一个赚钱的方法
  // 5. 将函数传给子组件，子组件负责调用

  // 6. 子传父给Wife： 定义一个花钱的方法
*/
import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  state = {
    money: 10000,
  };

  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 花钱方法
  handleCost = (num) => {
    this.setState({ money: this.state.money - num });
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：</h1>
        <Husband
          money={this.state.money}
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        <hr />
        <Wife handleCost={this.handleCost}></Wife>
      </div>
    );
  }
}
